<template>
  <div class="_wz_rolesNav">
    <Tabs value="menuType" style="height: 100%;">
      <TabPane label="PC" name="PC">
        <wzTbale ref="pcWzTbale" :tableData="PCTableData"></wzTbale>
      </TabPane>
      <TabPane label="APP" name="APP">
        <wzTbale ref="appcWzTbale" :tableData="APPTableData"></wzTbale>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wzTbale from "../../components/table/index.vue";
//reactive
export default defineComponent({
  name: 'rolesNav',//组件名称
  components: {
    wzTbale,
  },//组件引用
  props:['selectData'],
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法


    const state = reactive({
      pcWzTbale:ref(),
      appcWzTbale:ref(),
      menuType:'pc',
      PCTableData: {
        url: '',//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        rowKey:'id',
        height: '100%',//表格高度 auto
        page: false,//分页是否使用
        columns: [//表头数据
          // {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '功能名称', minWidth: 200, key: 'name', tooltip: true,tree: true,render: (h, params) => {
              return h('span', { style: { "margin": "0 0 0 10px"}}, `${params.row.name}`)
            }
          },
          {
            title: '授权', width: 120, fixed: 'right', render: (h, params) => {
              // <i-switch v-model.number="formData.noticeReplyType" :false-value="0" :true-value="1">
              //     <template #open><span>开</span></template>
              // <template #close><span>关</span></template>
              // </i-switch>
              return h(resolveComponent('switch'),
                 {
                    size:'small',
                    'model-value':params.row.check,
                    style: {},
                    onClick: () => {
                      if(!params.row.check){//开启-
                        $axios.post(apiUrl.systemRoleSystemRoleAllocateMenu,{roleId: props.selectData.roleId, menuId: params.row.id}).then((res) => {
                          if(!!res.data){

                          }
                        }).catch((err) => {
                          console.log("失败", err)
                        })
                      }else{//关闭
                        $axios.post(apiUrl.systemRoleSystemRoleRemoveMenu,{roleId: props.selectData.roleId, menuId: params.row.id}).then((res) => {
                          if(!!res.data){

                          }
                        }).catch((err) => {
                          console.log("失败", err)
                        })
                      }
                    }
                 });

              // return  h('span', {
              //   style: {"color": "#2d8cf0", "cursor": "pointer"},
              //   onClick: () => {
              //
              //   }
              // }, "修改");
            }
          },

        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
        dataList:[],
      },
      APPTableData: {
        url: '',//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        rowKey:'id',
        height: '100%',//表格高度 auto
        page: false,//分页是否使用
        columns: [//表头数据
          // {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '功能名称', minWidth: 200, key: 'name', tooltip: true,tree: true,render: (h, params) => {
              return h('span', { style: { "margin": "0 0 0 10px"}}, `${params.row.name}`)
            }
          },
          {
            title: '授权', width: 120, fixed: 'right', render: (h, params) => {
              // <i-switch v-model.number="formData.noticeReplyType" :false-value="0" :true-value="1">
              //     <template #open><span>开</span></template>
              // <template #close><span>关</span></template>
              // </i-switch>
              return h(resolveComponent('switch'),
                 {
                    size:'small',
                    'model-value':params.row.check,
                    style: {},
                    onClick: () => {
                      if(!params.row.check){//开启-
                        $axios.post(apiUrl.systemRoleSystemRoleAllocateMenu,{roleId: props.selectData.roleId, menuId: params.row.id}).then((res) => {
                          if(!!res.data){

                          }
                        }).catch((err) => {
                          console.log("失败", err)
                        })
                      }else{//关闭
                        $axios.post(apiUrl.systemRoleSystemRoleRemoveMenu,{roleId: props.selectData.roleId, menuId: params.row.id}).then((res) => {
                          if(!!res.data){

                          }
                        }).catch((err) => {
                          console.log("失败", err)
                        })
                      }
                    }
                 });

              // return  h('span', {
              //   style: {"color": "#2d8cf0", "cursor": "pointer"},
              //   onClick: () => {
              //
              //   }
              // }, "修改");
            }
          },

        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
        dataList:[],
      },

    });

    //加载数据
    const loadData = ()=>{
      //PC

      state.pcWzTbale.tableLoading = true;//加载
      $axios.post(apiUrl.systemMenuSystemMenuList,{roleId: props.selectData.roleId,clientType:'pc',moduleId:56}).then((res) => {
        if(!!res.data){
          res.data.data.map((k,i)=>{
            k._showChildren = true;
          })
          let tableDataList = $common.toTreeData(res.data.data,{
            id: 'id',
            parendId: 'parentId',
            name: 'name',
            rootId: 0
          })
          state.pcWzTbale.tableLoading = false;//加载
          state.PCTableData.dataList = tableDataList;
        }

      }).catch((err) => {
        console.log("失败", err)
      })


      //APP
      state.appcWzTbale.tableLoading = true;//加载
      $axios.post(apiUrl.systemMenuSystemMenuList,{roleId: props.selectData.roleId,clientType:'app',moduleId:56}).then((res) => {
        if(!!res.data){
          res.data.data.map((k,i)=>{
            k._showChildren = true;
          })
          let tableDataList = $common.toTreeData(res.data.data,{
            id: 'id',
            parendId: 'parentId',
            name: 'name',
            rootId: 0
          })

          state.appcWzTbale.tableLoading = false//加载
          state.APPTableData.dataList = tableDataList;
        }

      }).catch((err) => {
        console.log("失败", err)
      })
    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      setTimeout(()=>{
        loadData();
      },200)
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
._wz_rolesNav{
  width: 100%;
  height: 100%;
  .ivu-tabs-content{
    height: calc(100% - 36px - 16px - 1px);
  }
}
</style>
